import React from 'react';
import Ux from 'ux';
import Ex from 'ex';
import {Button, Card, Col, Row, Tree} from 'antd';
import './Cab.less';
import Op from './Op';

const componentInit = (reference) => {
    const state = {};
    state.$ready = true;
    // treeData
    const $tree = {};
    $tree.selectable = false;
    $tree.checkable = true;
    $tree.collapsable = false;
    $tree.showIcon = true;
    $tree.checkStrictly = true;
    $tree.defaultExpandAll = true;   // 默认全展开
    state.$tree = $tree;
    // matrix
    const {config = {}} = reference.props;
    const {group = [], columns = 3} = config;
    state.$matrix = Ux.toArray(group, columns);
    state.$span = 24 / columns;
    // 由于是菜单
    const $keySet = Ex.aclIn(reference);
    state.$keySet = $keySet;
    state.$keyDefault = $keySet;
    reference.setState(state);
}
const renderMenu = (reference, cell = {}) => {
    const {$tree = {}, $keySet} = reference.state;
    const treeAttrs = Ux.clone($tree);
    // treeData Calculate
    const treeData = Op.yoData(reference, cell);
    treeAttrs.treeData = treeData;
    // Card Calculate
    const cardAttrs = Op.yoCard(reference, cell);
    // Value Calculate
    treeAttrs.checkedKeys = Array.from($keySet);
    return (
        <Card {...cardAttrs}>
            <Tree {...treeAttrs}
                  onCheck={Ux.rxCheckedTree(reference, treeData, (selected) => {
                      const {$keyDefault} = reference.state;
                      const ref = Ux.onReference(reference, 1);
                      if (Ux.isDiff(selected, $keyDefault)) {
                          ref.setState({$refresh: true});
                      } else {
                          ref.setState({$refresh: false});
                      }
                  })}/>
        </Card>
    );
}

const renderAction = (reference) => {
    const {
        $region = {},
        $loading = false
    } = reference.props;
    const id = `action-${$region.value}`;
    return (
        <Button className={"ux-hidden"} id={id}
                loading={$loading}
                onClick={Op.rxAction(reference)}/>
    )
}

class Component extends React.PureComponent {
    componentDidMount() {
        componentInit(this);
    }

    render() {
        return Ex.yoRender(this, () => {
            // $matrix
            const {$matrix = []} = this.state;
            return (
                <div className={"hx-menu"}>
                    {$matrix.map((row, index) => (
                        <Row key={`row${index}`}>
                            {row.map((cell, cindex = 0) => (
                                <Col key={cell.key} {...Op.yoCol(this, cindex)}>
                                    {renderMenu(this, cell)}
                                </Col>
                            ))}
                        </Row>
                    ))}
                    {renderAction(this)}
                </div>
            )
        }, Ex.parserOfColor("HxMenu").internal({off: true}))
    }
}

export default Component